<template>
  <div>
    <h3>Welcome</h3>
    <el-table :data="tableData" :span-method="objectSpanMethod" border :header-cell-style="handerMethod">
      <el-table-column align="center" prop="id" label=""></el-table-column>
      <el-table-column align="center" prop="amount1" label="数据分类"></el-table-column>
      <el-table-column align="center" prop="amount2" label="缴存业务"></el-table-column>
      <el-table-column align="center" prop="amount3" label="提取业务"></el-table-column>
      <el-table-column align="center" prop="amount4" label="贷款业务"></el-table-column>
      <el-table-column align="center" label="业务办理合计">
        <el-table-column align="center" label="业务办理合计" prop="amount5"></el-table-column>
        <el-table-column align="center" label="" prop="amount6"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      spanArr: [], // 用于存放每一行记录的合并数
      tableData: [
        {
          id: '业务办理类业务统计量',
          amount1: '线上服务量小计',
          amount2: '1',
          amount3: '2',
          amount4: '3',
          amount5: '4',
          amount6: '4'
        },
        {
          id: '业务办理类业务统计量',
          amount1: '线上业务小计',
          amount2: '1',
          amount3: '2',
          amount4: '3',
          amount5: '4',
          amount6: '4'
        },
        {
          id: '业务办理类业务统计量',
          amount1: '线下业务小计',
          amount2: '1',
          amount3: '2',
          amount4: '3',
          amount5: '4',
          amount6: '4'
        },
        {
          id: '业务办理类业务统计量',
          amount1: '线上+线下',
          amount2: '1',
          amount3: '2',
          amount4: '3',
          amount5: '4',
          amount6: '4'
        },
        {
          id: '业务办理类业务统计量',
          amount1: '线上占比',
          amount2: '1',
          amount3: '2',
          amount4: '3',
          amount5: '4',
          amount6: '4'
        },
        {
          id: '9大渠道服务总量统计',
          amount1: '9大渠道服务总量统计',
          amount2: '信息查询',
          amount3: '信息发布',
          amount4: '互动交流',
          amount5: '业务办理',
          amount6: '线上总计'
        },
        {
          id: '9大渠道服务总量统计',
          amount1: '9大渠道服务总量统计',
          amount2: '01',
          amount3: '02',
          amount4: '03',
          amount5: '04',
          amount6: '05'
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    // 隐藏表头
    handerMethod({ rowIndex }) {
      if (rowIndex === 1) {
        // 这里为了是将第二列的表头隐藏，就形成了合并表头的效果
        return { display: 'none' }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 对第六行 进行合并（这里需要先进行列合并再进行行合并）
      if (rowIndex === 5) {
        if (columnIndex === 0) {
          return [2, 2]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      }
      // 对第一列 第二列 进行合并
      if (columnIndex === 1 || columnIndex === 0) {
        // 当 当前行与上一行内容相同时 返回0 0 意味消除
        if (rowIndex > 0 && row[column.property] === this.tableData[rowIndex - 1][column.property]) {
          return {
            rowspan: 0,
            colspan: 0
          }
        } else {
          let rows = 1
          // 反之 查询相同的内容有多少行 进行合并
          for (let i = rowIndex; i < this.tableData.length - 1; i++) {
            if (row[column.property] === this.tableData[i + 1][column.property]) {
              rows++
            }
          }
          // 返回相同内容的行数
          return {
            rowspan: rows,
            colspan: 1
          }
        }
      }
      // 对第一、二、三、四、五行 进行合并
      if (rowIndex === 0 || rowIndex === 1 || rowIndex === 2 || rowIndex === 3 || rowIndex === 4) {
        // 处理合计，[1,2]表示合并1行2列，[0,0]表示改行不显示
        if (columnIndex === 5) {
          // 定位到5列，告诉该单元格合并1行2列
          return [1, 2]
        } else if (columnIndex === 6) {
          // 定位到6列，告诉该单元格不显示
          return [0, 0]
        }
      }
    }

  }
}
</script>
